<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { bus } from '@/utils/mitt'
import { ElMessage } from 'element-plus'
import { getAdminListAPI, searchUserAPI } from '@/http/admin'
import userDetailDialog from '../components/userDetailDialog.vue'
import createDialog from '../components/createDialog.vue'
import editorDialog from '../components/editorDialog.vue'
import deleteDialog from '../components/deleteDialog.vue'
import useUserStore from '@/store/modules/user'
import pagination from '../components/pagination.vue'

// userDetailDialog实例
const userDetailDialogRef = ref()
// 表格每一行的用户信息实例
const userId = ref()
const userStore = useUserStore()
const editorDialogRef = ref()
const createDialogRef = ref()
const deleteDialogRef = ref()
const search = ref()
const userAdminList = ref()
const addDialog = (id: number) => {
  bus.emit('createId', id)
  createDialogRef.value.open()
}
const getUserAdminList = async () => {
  const res = await getAdminListAPI('用户')
  userAdminList.value = res
}
const searchAdmin = async () => {
  const res = await searchUserAPI(search.value, '用户')
  if (res.length) {
    ElMessage.success('查询成功')
    userAdminList.value = res
  } else {
    ElMessage.error(res.message)
    userAdminList.value = ''
  }
}
// 编辑产品管理员 Dialog
const openEdit = (id: number) => {
  bus.emit('editId', id)
  bus.emit('titleId', 2)
  editorDialogRef.value.open()
}
// 删除产品管理员
const openDelete = (id: number) => {
  if (userStore.identity == '用户') return ElMessage.error('您无权进行修改！')
  bus.emit('deleteId', id)
  deleteDialogRef.value.open()
}
const openUserInfo = (row: any) => {
  bus.emit('userRow', 2)
  userDetailDialogRef.value.open()
  userId.value = row
}
onMounted(() => {
  getUserAdminList()
})
</script>

<template>
  <div>
    <el-card>
      <div class="header">
        <el-input
          v-model="search"
          style="width: 240px"
          size="large"
          placeholder="输入账户进行搜索"
          :suffix-icon="Search"
          @change="searchAdmin"
          clearable
        />
        <el-button type="primary" @click="addDialog(2)" plain>
          添加用户管理员
        </el-button>
      </div>
      <div class="footer">
        <el-table
          :data="userAdminList"
          border
          style="width: 100%"
          @row-dblclick="openUserInfo"
        >
          <el-table-column
            type="index"
            fixed
            label="序号"
            width="53"
            align="center"
          />
          <el-table-column
            prop="account"
            label="账号"
            width="150"
            align="center"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="130"
            align="center"
          />
          <el-table-column prop="sex" label="性别" width="55" align="center" />
          <el-table-column
            prop="department"
            label="部门"
            width="110"
            align="center"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            width="200"
            align="center"
          />
          <el-table-column
            prop="updata_time"
            label="更新时间"
            width="250"
            align="center"
          />
          <el-table-column prop="status" label="状态" width="85" align="center">
            <template #default="{ row }">
              <el-tag type="success" v-if="row.status === 0">正常</el-tag>
              <el-tag type="danger" v-else>冻结</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="openEdit(row.id)">
                编辑
              </el-button>
              <el-button
                type="success"
                size="small"
                @click="openDelete(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination />
      </div>
    </el-card>
    <createDialog @adminList="getUserAdminList" ref="createDialogRef" />
    <editorDialog @adminList="getUserAdminList" ref="editorDialogRef" />
    <deleteDialog @adminList="getUserAdminList" ref="deleteDialogRef" />
    <userDetailDialog :userDataId="userId" ref="userDetailDialogRef" />
  </div>
</template>

<style scoped lang="scss">
.el-card {
  height: 100vh;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer {
    margin-top: 20px;
  }
}
</style>
